<template>  
  <el-scrollbar height="200px">
    <el-card v-for="(item, index) in uploads" class="card" shadow="hover">
      <div class="content">
        <div class="left">
          <el-text class="l1" truncated>{{ item.fileName }}</el-text>

        </div>

        <div class="right">
          <el-button @click="console.log(uploads)">show</el-button>
          <el-button @click="uploadStore.removeUpload(item.fileId)">Del</el-button>
          <el-button @click="uploadStore.clearUploads">DelAll</el-button>
        </div>

      </div>
      <div class="bottom" v-if="item.progress > 0">
        <el-progress :stroke-width="5" :percentage="item.progress" :status="item.status" />
      </div>
    </el-card>
  </el-scrollbar>

</template>

<script setup lang="ts">
import { useUploadStore } from '@/stores/uploadStore';
// 获取上传状态存储 
const uploadStore = useUploadStore();

// 计算属性来获取当前用户的上传文件列表
//@ts-ignore
const uploads = computed(() => uploadStore.currentUploads);

// 你可以在这里添加其他逻辑，比如上传文件、处理上传进度等
// 例如，一个上传文件的函数可能如下所示：
// async function uploadFile(file: File) {
//   try {
//     uploadStore.addFile(file);
//     // 接下来，你可能会调用某个API来实际上传文件分块
//     // 并在上传过程中更新分块进度和标记分块为已上传
//   } catch (error) {
//     ElMessage.error('Failed to upload file: ' + error.message);
//   }
// }

</script>

<style scoped>
/* 你的样式代码 */
.content {
  display: flex;
  justify-content: space-between;
}


.left {
  width: 70%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  white-space: nowrap;
  /* 防止文本换行 */
  /* text-overflow: ellipsis; */
  /* 超出部分显示省略号 */

}

.l1 {
  width: 60%;
}

.right {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}


</style>